<template>
    <div class="wrapper">
      <a-form>
        <a-row :gutter="24">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="半年度">
              <a-year-picker v-model="value" @quarterChange="getQuarte" />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="人员类型">
              <a-select showSearch v-model="queryParam.personType" @change="handleSelect">
                <a-select-option
                  v-for="item in personList"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.label }}</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <div id="my_bar_chart"></div>
    </div>
  </template>
  
  <script>
  import { getCurMonthData } from "@/api/allApi";
  import AYearPicker from "./AYearPicker.vue";
  import * as echarts from "echarts";
  export default {
    components: { AYearPicker },
    data() {
      return {
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 10 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 14 },
          },
        },
        personList: [
          {
            value: 2,
            label: "安置帮教",
          },
          {
            value: 3,
            label: "后续照管",
          },
        ],
        queryParam: {
          year: new Date().getFullYear(),
          sortIndex: this.$moment().quarter(),
          personType: 2,
        },
        value: "",
        barChart: null,
        typeList: ["应走访数", "实走访数", "走访率"],
        option: {
          title: {
            text: "季度走访情况",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: ["应走访数", "实走访数", "走访率"],
          },
          toolbox: {
            show: true,
            orient: "vertical",
            left: "right",
            top: "center",
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar", "stack"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          xAxis: [
            {
              type: "category",
  
              axisLabel: {
                rotate: 45,
              },
              axisTick: { show: false },
              data: [],
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            // {
            //   name: 'Forest',
            //   type: 'bar',
            //   barGap: 0,
            //   label: labelOption,
            //   emphasis: {
            //     focus: 'series'
            //   },
            //   data: [320, 332, 301, 334, 390]
            // },
          ],
        },
      };
    },
    created() {},
    mounted() {
      this.barChart = echarts.init(document.getElementById("my_bar_chart"));
      this.initData();
    },
    methods: {
      getQuarte(p) {
        console.log(p);
        this.queryParam = Object.assign(this.queryParam,{
          ...p
        });
        this.initData();
      },
      handleSelect(v){
        this.queryParam = Object.assign(this.queryParam,{
          personType: v
        });
        this.initData();
      },
  
  
      async initData() {
        let xData = [];
        let yData = [];
        let labelOption = {
          show: true,
          position: "top",
          formatter: function (params) {
            return params.seriesName == "走访率"
              ? `${params.value}%`
              : params.value;
          },
          fontSize: 14,
        };
        if (this.queryParam.year) {
          const cnNum = ["一", "二"];
          this.option.title.text = `半年度走访情况（${this.queryParam.year}年${
            cnNum[this.queryParam.sortIndex - 1] == "一"
              ? "上半年"
              : "下半年" 
          }）`;
        }
        const { data } = await getCurMonthData({
          departmentid: 1,
          phaseType: "HalfYear",
          ...this.queryParam,
        });
        console.log(data);
        if (data && data.length > 0) {
          xData = data.map((el) => {
            return el.DepartmentName;
          });
          yData = this.typeList.map((el) => {
            return {
              name: el,
              type: "bar",
              barGap: 0,
              label: labelOption,
              itemStyle: {
                // 设置柱子颜色
                color:
                  el == "应走访数"
                    ? "#5470C6"
                    : el == "实走访数"
                    ? "#92CC76"
                    : "#ee6666",
              },
              data: data.map((e) => {
                return el == "应走访数"
                  ? e.ShouldPersonNum
                  : el == "实走访数"
                  ? e.AlreadyVisitNum
                  : e.VisitRate;
              }),
            };
          });
          this.option.xAxis[0].data = xData;
          this.option.series = yData;
          this.barChart.setOption(this.option);
        }
      },
    },
  };
  </script>
  
  <style>
  #my_bar_chart {
    padding-top: 10px;
    width: 90%;
    height: 550px;
    border: 1px solid #ccc;
  }
  </style>
  